<template>
  <div class="hamburgerBox" @click="toggleClick">
    <svg-icon class="hamburger" :class="{ 'is-active': isActive }" icon-class="indent-decrease" />
  </div>
</template>

<script setup lang="ts">
defineProps({
  isActive: {
    required: true,
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['toggleClick'])
function toggleClick() {
  emit('toggleClick')
}
</script>

<style lang="scss" scoped>
.hamburgerBox {
  display: flex;
  align-items: center;
  color: var(--el-text-color-regular);
  padding-left: 15px;
  padding-right: 15px;
}
.hamburger {
  vertical-align: middle;
  cursor: pointer;
  transform: scaleX(-1);
}

.hamburger.is-active {
  transform: scaleX(1);
}
</style>
